<template>
  <div>
    <el-card>
      <el-header class="headerStyle">
        <el-button 
          class="button1Style" 
          @click="addDishes('dishes')"
        >+新增菜品分类</el-button>
        <el-button 
          class="button2Style" 
          @click="addDishes('combo')"
        >+新增套餐分类</el-button>
      </el-header>
      <el-main>
        <el-table
          :data="classifyData"
          stripe
          class="tableStyle"
        >
          <el-table-column
            prop="name"
            label="分类名称"
          />
          <el-table-column
            prop="type"
            label="分类类型"
            >
            <template slot-scope="scope">
              <span>{{scope.row.type === 1 ? '菜品分类':'套餐分类'}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="updateTime"
            label="操作时间"
          >
            <template slot-scope="scope">
              {{scope.row.updateTime}}
            </template>
          </el-table-column>
          <el-table-column
            prop="sort"
            label="排序"
          />
          <el-table-column
            prop="click"
            label="操作"
            class="lastStyle"
            width="100"
          >
            <template slot-scope="scope">
              <el-button 
                type="text" 
                size="small" 
                @click="handleClick(scope.row)"
              >修改</el-button>
              <el-button 
                type="text" 
                size="small" 
                style="color:#FF0000" 
                @click="deleteClick(scope.row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <div class="pageStyle">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      />
      </div>
      <el-dialog
        :title="dishData.title"
        :visible.sync="dishData.hidden"
        width="40%"
        center
        :before-close="handleClose"
        >
        <el-form
          label-width="100px"
          class="formStyle"
        >
          <el-form-item label="分类名称:">
            <el-input
              v-model="dishData.name"
              placeholder="请输入分类名称"
              maxlength="14"
              class="demo-form-inline"
            />
          </el-form-item>
          <el-form-item label="排序:">
            <el-input v-model="dishData.sort"  type="number" placeholder="请输入排序" />
          </el-form-item>
        </el-form>
        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button
            type="primary"
            size="medium"
            @click="dishData.hidden = false"
          >取 消</el-button>
          <el-button
            type="primary"
            size="medium"
            @click="submitForm()"
          >{{dishData.submit}}</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
import { getClassifyList,deleClassify,addClassify,editClassify } from '@/api/classify'
export default {
  data() {
    return {
      classifyData: [],
      dishData: {
        title: '添加菜品分类',
        submit: '修改',
        hidden: false,
        name: '',
        sort: ''
      },
      input: '',
      page: 1,
      pageSize: 10,
      type: '',
      total: 0,
      dishCombo: ''
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      const changeData = {
        'page': this.page,
        'pageSize': this.pageSize
      }
      await getClassifyList(changeData).then(res => {
        console.log(res)
        this.classifyData = res.data.records;
        this.total = Number(res.data.total)
      }).catch(err => {
        this.$message.error('请求出错了:' + err)
      })
    },
    addDishes(ad) {
      if (ad === 'dishes') {
        this.dishData.title = '添加菜品分类'
        this.type = 1
        this.dishData.submit = '添加菜品'
      } else if(ad === 'combo'){
        this.dishData.title = '添加套餐分类'
        this.type = ''
        this.dishData.submit = '添加套餐'
      }
      this.dishData.hidden = true;
      this.dishCombo = 'add'//添加行为
    },
    handleClick(st) {
      this.dishData.hidden = true
      this.dishData.title = '修改分类'
      this.dishData.submit = '修改'
      this.dishData.name = st.name
      this.dishData.sort = st.sort
    },
    deleteClick(id) {
      this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleClassify(id).then(res => {
          if (res.code === 1) {
            this.$message.success('删除成功！')
            this.fetchData()
          } else {
            this.$message.error(res.msg || '操作失败')
          }
        }).catch(err => {
          this.$message.error('请求出错' + err)
        })
      })
    },
    submitForm(sf) {
      const dishData = this.dishData
      const valid = (dishData.name || dishData.name === 0) && (dishData.sort || dishData.sort === 0)
      if (this.dishCombo === 'add') {
        if (valid) {
          const validData = {
            name: dishData.name,
            sort: dishData.sort,
            type: this.type
          }
          addClassify(validData).then(res => {
            this.$message.success('添加成功!')
            if (!sf) {
              this.dishData.hidden = false
            }else {
              this.dishData.name = ''
              this.dishData.sort = ''
            }
              this.fetchData()
            }).catch(err => {
            this.$message.error('请求出错了：' + err)
          })
        }
      } else {
        if (valid) {
          const data = {
            name: this.dishData.name,
            sort: this.dishData.sort
          }
          editClassify(data).then(res => {
            this.$message.success('修改成功!')
            this.dishData.hidden = false
            this.fetchData()
            }).catch(err => {
            this.$message.error('请求出错了：' + err)
          })
        }
      }
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.page = val
      this.fetchData()
    }
  }
}
</script>

<style lang="scss" scoped>
.formStyle{
  margin: 0px auto;
}
.button1Style{
    margin-top:20px;
    width: 220px;
    height: 50px;
    font-size:20px;
    background-color: #304156;
    color:white;
    border:none;
}
.button1Style:hover{
    color:pink;
}
.button2Style{
    margin-top:20px;
    width: 220px;
    height: 50px;
    font-size:20px;
    background-color:pink;
    color:white;
    border:none;
}
.button2Style:hover{
    color:#304156;
}
.pageStyle{
    margin:0 auto;
    padding-top:80px;
    padding-bottom:20px;
    text-align: center;
  }
  </style>